```svelte
<script lang="ts">
  import { normalizeProps, useMachine } from "@zag-js/svelte"
  import * as toast from "@zag-js/toast"

  // 1. Create the single toast
  const toaster = toast.createStore({
    placement: "top-end",
    overlap: true,
  })

  // 2. Design the toast component
  interface ToastProps {
    toast: toast.Options
    index: number
    parent: toast.GroupService
  }

  const { toast, index, parent }: ToastProps = $props()

  const machineProps = $derived({ ...toast, parent, index })
  const service = useMachine(toast.machine, () => machineProps)

  const api = $derived(toast.connect(service, normalizeProps))
</script>

<div {...api.getRootProps()}>
  <h3 {...api.getTitleProps()}>{api.title}</h3>
  <p {...api.getDescriptionProps()}>{api.description}</p>
  <button onclick={api.dismiss}>Close</button>
</div>

<!-- 3. Design the toaster -->
<script lang="ts">
  import { normalizeProps, useMachine } from "@zag-js/svelte"
  import * as toast from "@zag-js/toast"
  import Toast from "./toast-item.svelte"

  const id = $props.id()
  const service = useMachine(toast.group.machine, {
    id,
    store: toaster,
  })

  const api = $derived(toast.group.connect(service, normalizeProps))
</script>

<div {...api.getGroupProps()}>
  {#each api.getToasts() as toast, index (toast.id)}
  <Toast toast={toast} index={index} parent={service} />
  {/each}
</div>

<!-- 4. Wrap your app with the toaster -->
<script lang="ts">
  import Toaster from "./toaster.svelte"
</script>

<Toaster />

<!-- 5. Within your app -->
<div>
  <button onclick={() => {
    toaster.create({ title: "Hello" })
  }}>
    Add top-right toast
  </button>
  <button onclick={() => {
    toaster.create({ title: "Data submitted!", type: "success" })
  }}>
    Success toast
  </button>
</div>
```
